<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10 表单验证  练习</title>
<style type="text/css">
	*{
		margin: 0 0;
		padding: 0;
	}
	.right{
		color: lightgreen;
		border-color: green !important;
	}
	.error{
		color: red;
		border-color: red !important;
	}
	input{
		outline:none;
		border:1px solid darkgray;
		color: #000000;
	}

	.onfocus_score{
		border-color:darkgray;
		outline:none;
		color:#000000;
	}


</style>
</head>
<body>
	<div id="box">
		<label > 您的成绩为：</label>
		<input type="text" id="score">
		<span id="prompt">请输入成绩</span>
	</div>


<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

//在类型上，如果id是字符串则获取id，否则为无
function $(id){
		return typeof id=== 'string'?document.getElementById(id):null;
	}

	// input输入框失去焦点时
	$("score").onblur=function(){
		// 1.获取输入内容以及输入内容类型
		var value=parseFloat(this.value)//将数值转为Float类型
		console.log(typeof value)//类型格式
		// 2.验证,inNaN()验证数值的false和true
		console.log( isNaN(value))//对parseFloat判断类型的是与否

		if(isNaN(value==false)){
			$('prompt').innerHTML="成绩符合规范"
			$('prompt').className='right'

		}else if(value>=0 && value<=100 ){
			$('prompt').innerHTML="成绩已经在0--100之内"
			$('prompt').className='right'

		}else{
			// 超出成绩的范围提示
			$('prompt').innerHTML="成绩输入不符合规范"
			$('prompt').className='error'
			this.style.borderColor="red"
		}

	}

	$("score").onfocus=function(){
		$('prompt').innerHTML='onfocus>请输入成绩'
		$('prompt').className=''

		$('score').className='onfocus_score'
		$('score').value=''
	}



</script>

</body>
</html>